<template>
  <div class="attendanceStatistics">
    <div class="common_showBox bx">

      <div class="common_titleBox br bx">
        <div class="common_title bx">
          <div class="common_title_left">考勤统计信息</div>
          <div class="common_title_right">

          </div>
        </div>
        <div class="common_form bx">
          <!-- <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%;height: 100%" @selection-change="handleSelectionChange" @row-click="console"> -->
              <el-table v-if="week_start==0" ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%;height: 100%"
              @selection-change="handleSelectionChange">

              <el-table-column prop="week" label="周次" ></el-table-column>
              <el-table-column label="周日" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span :class="late_num(scope.row.weeklist[0])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[0])==0"> 迟到:{{late_num(scope.row.weeklist[0])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[0])" v-if="late_num(scope.row.weeklist[0])!=0">
                        <span slot="reference"> 迟到:</span>
                        <span :class="late_num(scope.row.weeklist[0])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[0])}}</span>
                      </el-popover>
                      </span>
                      <span :class="missednum(scope.row.weeklist[0])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[0])==0">未打卡: {{missednum(scope.row.weeklist[0])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[0])" v-if="missednum(scope.row.weeklist[0])!=0">
                        <span slot="reference"> 未打卡:</span>
                        <span :class="missednum(scope.row.weeklist[0])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[0])}}</span>
                      </el-popover>
                    </template>
              </el-table-column>
              <el-table-column label="周一" >
                <template slot-scope="scope">
                  <span :class="late_num(scope.row.weeklist[1])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[1])==0"> 迟到:{{late_num(scope.row.weeklist[1])}}</span>
                  <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[1])" v-if="late_num(scope.row.weeklist[1])!=0">
                    <span slot="reference"> 迟到:</span>
                    <span :class="late_num(scope.row.weeklist[1])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[1])}}</span>
                  </el-popover>
                  </span>
                  <span :class="missednum(scope.row.weeklist[1])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[1])==0">未打卡: {{missednum(scope.row.weeklist[1])}}</span>
                  <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[1])" v-if="missednum(scope.row.weeklist[1])!=0">
                    <span slot="reference"> 未打卡:</span>
                    <span :class="missednum(scope.row.weeklist[1])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[1])}}</span>
                  </el-popover>
                </template>
              </el-table-column>
              <el-table-column label="周二" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span :class="late_num(scope.row.weeklist[2])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[2])==0"> 迟到:{{late_num(scope.row.weeklist[2])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[2])" v-if="late_num(scope.row.weeklist[2])!=0">
                        <span slot="reference"> 迟到:</span>
                        <span :class="late_num(scope.row.weeklist[2])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[2])}}</span>
                      </el-popover>
                      </span>
                      <span :class="missednum(scope.row.weeklist[2])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[2])==0">未打卡: {{missednum(scope.row.weeklist[2])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[2])" v-if="missednum(scope.row.weeklist[2])!=0">
                        <span slot="reference"> 未打卡:</span>
                        <span :class="missednum(scope.row.weeklist[2])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[2])}}</span>
                      </el-popover>
                    </template>
              </el-table-column>
              <el-table-column label="周三" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span :class="late_num(scope.row.weeklist[3])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[3])==0"> 迟到:{{late_num(scope.row.weeklist[3])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[3])" v-if="late_num(scope.row.weeklist[3])!=0">
                        <span slot="reference"> 迟到:</span>
                        <span :class="late_num(scope.row.weeklist[3])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[3])}}</span>
                      </el-popover>
                      </span>
                      <span :class="missednum(scope.row.weeklist[3])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[3])==0">未打卡: {{missednum(scope.row.weeklist[3])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[3])" v-if="missednum(scope.row.weeklist[3])!=0">
                        <span slot="reference"> 未打卡:</span>
                        <span :class="missednum(scope.row.weeklist[3])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[3])}}</span>
                      </el-popover>
                    </template>
              </el-table-column>
              <el-table-column label="周四" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span :class="late_num(scope.row.weeklist[4])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[4])==0"> 迟到:{{late_num(scope.row.weeklist[4])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[4])" v-if="late_num(scope.row.weeklist[4])!=0">
                        <span slot="reference"> 迟到:</span>
                        <span :class="late_num(scope.row.weeklist[4])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[4])}}</span>
                      </el-popover>
                      </span>
                      <span :class="missednum(scope.row.weeklist[4])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[4])==0">未打卡: {{missednum(scope.row.weeklist[4])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[4])" v-if="missednum(scope.row.weeklist[4])!=0">
                        <span slot="reference"> 未打卡:</span>
                        <span :class="missednum(scope.row.weeklist[4])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[4])}}</span>
                      </el-popover>
                    </template>
              </el-table-column>
              <el-table-column label="周五" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span :class="late_num(scope.row.weeklist[5])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[5])==0"> 迟到:{{late_num(scope.row.weeklist[5])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[5])" v-if="late_num(scope.row.weeklist[5])!=0">
                        <span slot="reference"> 迟到:</span>
                        <span :class="late_num(scope.row.weeklist[5])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[5])}}</span>
                      </el-popover>
                      </span>
                      <span :class="missednum(scope.row.weeklist[5])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[5])==0">未打卡: {{missednum(scope.row.weeklist[5])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[5])" v-if="missednum(scope.row.weeklist[5])!=0">
                        <span slot="reference"> 未打卡:</span>
                        <span :class="missednum(scope.row.weeklist[5])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[5])}}</span>
                      </el-popover>
                    </template>
              </el-table-column>
              <el-table-column label="周六" show-overflow-tooltip >
                  <template slot-scope="scope">
                      <span :class="late_num(scope.row.weeklist[6])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[6])==0"> 迟到:{{late_num(scope.row.weeklist[6])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[6])" v-if="late_num(scope.row.weeklist[6])!=0">
                        <span slot="reference"> 迟到:</span>
                        <span :class="late_num(scope.row.weeklist[6])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[6])}}</span>
                      </el-popover>
                      </span>
                      <span :class="missednum(scope.row.weeklist[6])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[6])==0">未打卡: {{missednum(scope.row.weeklist[6])}}</span>
                      <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[6])" v-if="missednum(scope.row.weeklist[6])!=0">
                        <span slot="reference"> 未打卡:</span>
                        <span :class="missednum(scope.row.weeklist[6])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[6])}}</span>
                      </el-popover>
                    </template>
              </el-table-column>

            </el-table>
          <el-table v-if="week_start==1" ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%;height: 100%"
            @selection-change="handleSelectionChange">
     
            <el-table-column prop="week" label="周次" ></el-table-column>
            <el-table-column label="周一" >
              <template slot-scope="scope">
                <span :class="late_num(scope.row.weeklist[1])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[1])==0"> 迟到:{{late_num(scope.row.weeklist[1])}}</span>
                <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[1])" v-if="late_num(scope.row.weeklist[1])!=0">
                  <span slot="reference"> 迟到:</span>
                  <span :class="late_num(scope.row.weeklist[1])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[1])}}</span>
                </el-popover>
                </span>
                <span :class="missednum(scope.row.weeklist[1])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[1])==0">未打卡: {{missednum(scope.row.weeklist[1])}}</span>
                <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[1])" v-if="missednum(scope.row.weeklist[1])!=0">
                  <span slot="reference"> 未打卡:</span>
                  <span :class="missednum(scope.row.weeklist[1])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[1])}}</span>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="周二" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span :class="late_num(scope.row.weeklist[2])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[2])==0"> 迟到:{{late_num(scope.row.weeklist[2])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[2])" v-if="late_num(scope.row.weeklist[2])!=0">
                      <span slot="reference"> 迟到:</span>
                      <span :class="late_num(scope.row.weeklist[2])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[2])}}</span>
                    </el-popover>
                    </span>
                    <span :class="missednum(scope.row.weeklist[2])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[2])==0">未打卡: {{missednum(scope.row.weeklist[2])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[2])" v-if="missednum(scope.row.weeklist[2])!=0">
                      <span slot="reference"> 未打卡:</span>
                      <span :class="missednum(scope.row.weeklist[2])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[2])}}</span>
                    </el-popover>
                  </template>
            </el-table-column>
            <el-table-column label="周三" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span :class="late_num(scope.row.weeklist[3])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[3])==0"> 迟到:{{late_num(scope.row.weeklist[3])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[3])" v-if="late_num(scope.row.weeklist[3])!=0">
                      <span slot="reference"> 迟到:</span>
                      <span :class="late_num(scope.row.weeklist[3])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[3])}}</span>
                    </el-popover>
                    </span>
                    <span :class="missednum(scope.row.weeklist[3])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[3])==0">未打卡: {{missednum(scope.row.weeklist[3])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[3])" v-if="missednum(scope.row.weeklist[3])!=0">
                      <span slot="reference"> 未打卡:</span>
                      <span :class="missednum(scope.row.weeklist[3])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[3])}}</span>
                    </el-popover>
                  </template>
            </el-table-column>
            <el-table-column label="周四" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span :class="late_num(scope.row.weeklist[4])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[4])==0"> 迟到:{{late_num(scope.row.weeklist[4])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[4])" v-if="late_num(scope.row.weeklist[4])!=0">
                      <span slot="reference"> 迟到:</span>
                      <span :class="late_num(scope.row.weeklist[4])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[4])}}</span>
                    </el-popover>
                    </span>
                    <span :class="missednum(scope.row.weeklist[4])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[4])==0">未打卡: {{missednum(scope.row.weeklist[4])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[4])" v-if="missednum(scope.row.weeklist[4])!=0">
                      <span slot="reference"> 未打卡:</span>
                      <span :class="missednum(scope.row.weeklist[4])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[4])}}</span>
                    </el-popover>
                  </template>
            </el-table-column>
            <el-table-column label="周五" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span :class="late_num(scope.row.weeklist[5])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[5])==0"> 迟到:{{late_num(scope.row.weeklist[5])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[5])" v-if="late_num(scope.row.weeklist[5])!=0">
                      <span slot="reference"> 迟到:</span>
                      <span :class="late_num(scope.row.weeklist[5])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[5])}}</span>
                    </el-popover>
                    </span>
                    <span :class="missednum(scope.row.weeklist[5])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[5])==0">未打卡: {{missednum(scope.row.weeklist[5])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[5])" v-if="missednum(scope.row.weeklist[5])!=0">
                      <span slot="reference"> 未打卡:</span>
                      <span :class="missednum(scope.row.weeklist[5])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[5])}}</span>
                    </el-popover>
                  </template>
            </el-table-column>
            <el-table-column label="周六" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span :class="late_num(scope.row.weeklist[6])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[6])==0"> 迟到:{{late_num(scope.row.weeklist[6])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[6])" v-if="late_num(scope.row.weeklist[6])!=0">
                      <span slot="reference"> 迟到:</span>
                      <span :class="late_num(scope.row.weeklist[6])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[6])}}</span>
                    </el-popover>
                    </span>
                    <span :class="missednum(scope.row.weeklist[6])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[6])==0">未打卡: {{missednum(scope.row.weeklist[6])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[6])" v-if="missednum(scope.row.weeklist[6])!=0">
                      <span slot="reference"> 未打卡:</span>
                      <span :class="missednum(scope.row.weeklist[6])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[6])}}</span>
                    </el-popover>
                  </template>
            </el-table-column>
            <el-table-column label="周日" show-overflow-tooltip >
                <template slot-scope="scope">
                    <span :class="late_num(scope.row.weeklist[0])==0?'':'red'" slot="reference" v-if="late_num(scope.row.weeklist[0])==0"> 迟到:{{late_num(scope.row.weeklist[0])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="late_numList(scope.row.weeklist[0])" v-if="late_num(scope.row.weeklist[0])!=0">
                      <span slot="reference"> 迟到:</span>
                      <span :class="late_num(scope.row.weeklist[0])==0?'':'red'" slot="reference">{{late_num(scope.row.weeklist[0])}}</span>
                    </el-popover>
                    </span>
                    <span :class="missednum(scope.row.weeklist[0])==0?'':'red'" slot="reference" v-if="missednum(scope.row.weeklist[0])==0">未打卡: {{missednum(scope.row.weeklist[0])}}</span>
                    <el-popover placement="right-start"  trigger="hover" :content="missed_numList(scope.row.weeklist[0])" v-if="missednum(scope.row.weeklist[0])!=0">
                      <span slot="reference"> 未打卡:</span>
                      <span :class="missednum(scope.row.weeklist[0])==0?'':'red'" slot="reference"> {{missednum(scope.row.weeklist[0])}}</span>
                    </el-popover>
                  </template>
            </el-table-column>
          </el-table>
          <!-- <div class="common_form_btnBox">
            <div @click="minPageFlag &&minPage()" class="common_form_btn_min" :class="{disableClick:!minPageFlag}">首页</div>
            <img :src="minPageFlag?'static/images/last.png':'static/images/lastNo.png'" alt="上一页"  @click="minPageFlag &&lastPage()"
              class="common_form_btn_last">
            <div class="common_form_btn_num">{{page}}</div>
            <img :src="maxPageFlag?'static/images/next.png':'static/images/nextNo.png'" alt="下一页" @click="maxPageFlag &&nextPage()"
              class="common_form_btn_next">
            <div @click="maxPageFlag &&maxPage()" class="pages_form_btn_max" :class="{disableClick:!maxPageFlag}">尾页</div>
            <div class="common_form_btn_total">总共{{totalPage}}页</div>
          </div> -->
        </div>
      </div>
    </div>

    <div class="attendanceBox br bx" v-if="noticeFlag">

      <button @click="console">返回</button>
    </div>
  </div>


</template>

<script>
  import {
    http
  } from "../../../api/config"; //引入请求

  export default {
    name: 'home',
    data() {
      return {
        liDataGet: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        liDataGet1: [{ //输入框数据
          title: '五年级1班'
        }, {
          title: '五年级2班'
        }, {
          title: '五年级3班'
        }, {
          title: '五年级4班'
        }, {
          title: '五年级5班'
        }],
        noticeFlag: false,
        addClassFlag: false, //添加班级开关
        setTeacherFlag: false, //设置老师开关
        class_id: 1,
        page: 1, //初始页数
        pagesize: 12, //页数条数
        minPageFlag: false, //最小页面开关
        maxPageFlag: true, //最大页面开关
        totalPage: 0, //总共页数
        tableData3: [], //接收数据
        multipleSelection: [], //多选按钮
        handleEdit(index, row) { //修改事件
          //console.log(index, row);
        },
        handleDelete(index, row) { //删除事件
          //console.log(index, row);
        }
      }
    },
    methods: {
      change: function (e) { //下拉框插件改变
        // //console.log(e)
      },
      openLayer() { //显示添加班级弹窗
        this.addClassFlag = true;
        $('.mask').show();
      },
      setTeacher() { //设置教师
        this.setTeacherFlag = true;
        $('.mask').show();
      },
      deletBtn() { //删除按钮
        //console.log(this.multipleSelection)
      },
      toggleSelection(rows) { //全选
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      console(row) {
        //console.log(row);
        this.noticeFlag = !this.noticeFlag;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val; //选中数据
      },
      console(e) {
        let str = 0;
        if (e) {
          str = `迟到:${e.late_num} 未打卡:${e.missednum} `
          //console.log(e.missednum)
        }

        return str
      },
      late_num(e) {
        let str = 0;
        if (e) {
          str = e.late_num
        }
        return str
      },
      late_numList(e) {
        let str = '';
        if (e) {

          if (e.latelist.length > 0) {
            e.latelist.map((val, index) => {
              str += e.latelist[index].name + ',';
            })
          }
          str = str.substring(0, str.length - 1);
        }
        return str
      },
      missed_numList(e) {
        let str = '';
        if (e) {

          if (e.missedlist.length > 0) {
            e.missedlist.map((val, index) => {
              // //console.log(e.missednum)
              str += e.missedlist[index].name + ',';
            })
          }
          str = str.substring(0, str.length - 1);
        }
        return str
      },
      missednum(e) {
        let str = 0;
        if (e) {
          str = e.missednum
        }
        return str
      },
      alertBox() {
        //console.log(1)
      },
      getData(page, pagesize) { //获取数据
        var page = page;
        var pagesize = pagesize;
        let _this = this;


      },
      nextPage() { //下一页
        var page = this.page + 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize)
      },
      lastPage() { //上一页
        var page = this.page - 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      minPage() { //首页
        var page = 1;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      maxPage() { //尾页
        var page = this.totalPage;
        var pagesize = this.pagesize;
        this.getData(page, pagesize);
      },
      cancelBtn() { //取消按钮
        this.addClassFlag = false;
        this.setTeacherFlag = false;
        $('.mask').hide();
      },
      setTeacherSureBtn() { //设置教师确定按钮
        alert('保存成功')
        this.setTeacherFlag = false;
        $('.mask').hide();
      },
      addClassSureBtn() { //添加班级确定按钮
        alert('保存成功')
        this.addClassFlag = false;
        $('.mask').hide();
      }
    },

    beforeRouteEnter(to, from, next) {
      //传给父组建值
      next(vm => {
        vm.$emit('pageName', to.name)
      });


    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .select {
    width: 226px;
    box-sizing: border-box;
  }

  .importentIcon::before {
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    background: url('../../../../static/images/importent.png');
  }

  .chooseBox {
    margin: 0;
    width: 226px;
    position: relative;
    /* padding-right: 56px; */
    box-sizing: border-box;
  }

  .classManagement_alert_li span {
    position: relative;
  }

  .chooseBox input {
    border: none;
    outline: none;
  }

  .chooseBox.down::after {
    content: '';
    width: 15px;
    height: 10px;
    position: absolute;
    right: 20px;
    background: url('../../../../static/images/down.png');
    top: 50%;
    transform: translateY(-50%);
  }

  .chooseBox.date::after {
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    right: 20px;
    background: url('../../../../static/images/date.png');
    top: 50%;
    transform: translateY(-50%);
  }



  .classManagement_alertBox.addClass {
    width: 833px;
    height: 376px;
  }

  /* ::-webkit-scrollbar {
          隐藏滚轮
          display: none;
      } */

  .classManagement_alertBox.setTeacher {
    width: 818px;
    height: 710px;
  }

  .classManagement_alertBox.setTeacher .message-box__content::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  .classManagement_alertBox.setTeacher .message-box__content::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #d8d8d8;
  }

  .classManagement_alertBox.setTeacher .message-box__content::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #fff;
  }

  .classManagement_alertBox.setTeacher .message-box__content {
    height: 500px;
    overflow-y: scroll;
  }

  .classManagement_alertBox.setTeacher .classManagement_alert_li {
    height: 60px;
    border-bottom: 2px solid #ececec;
    box-sizing: border-box;

  }

  .classManagement_alertBox.setTeacher .classManagement_alert_right,
  .classManagement_alertBox.setTeacher .classManagement_alert_left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

  }


  .classManagement_alertBox.setTeacher .chooseBox span {
    margin-left: 26px;

  }

  .classManagement_alertBox.setTeacher .select {
    text-align: left;
  }


  .classManagement_alert_li {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }

  .classManagement_alert_right,
  .classManagement_alert_left {
    width: 50%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .message-box__footer {
    padding: 35px 275px 0;
    height: 35px;
    display: flex;
    justify-content: space-between;
  }

  .message-box__Btn {
    width: 118px;
    height: 35px;
    line-height: 35px;
    border-radius: 18px;
    color: #fff;
    background: #1985ce;
  }

  .message-box__sureBtn .pages_form_btnBox {
    font-size: 18px;
    color: #757575;
  }

  .disableClick {
    color: #bebebe;
  }

  .common_form_btn_min {
    margin-right: 13px;
  }

  .pages_form_btn_next {
    margin-right: 10px;
  }

  .pages_form_btn_max {
    margin-right: 32px;
  }

  .pages_form_btn_total {
    margin-right: 35px;
  }

  .pages_form_btn_last {
    margin-right: 26px;
  }

  .pages_form_btn_num {
    width: 37px;
    height: 37px;
    background: #fff;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
    line-height: 37px;
    text-align: center;
    border-radius: 50%;
    margin-right: 26px;
  }

  .class {
    position: relative;
    width: 100%;
    height: 100%;
    /* border-top: 1px solid rgba(0, 0, 0, 0); */
  }

  .classManagementList {
    width: 100%;
    height: 100%;
    margin-top: 0;
    position: relative;
  }

  .classManagement_title {
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .classManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
    color: #636363;
  }

  .classManagement_title_right {
    display: flex;
    align-items: center;
  }

  .classManagement_title_btn {
    margin-right: 30px;
    /* width: 180px; */
    padding: 0 27px;
    height: 34px;
    background: #2286cf;
    border-radius: 34px;
    line-height: 34px;
    color: #fff;
  }



  .campusManagementBox {
    width: 100%;
    height: 100%;
    position: relative;
  }

  .campus {
    width: 100%;
    height: 100%;
    background: #fff;
    padding-top: 60px;
    position: relative;
  }

  .campusManagement_title {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
  }

  .campusManagement_title_left {
    font-size: 22px;
    line-height: 60px;
    font-weight: 900;
    margin-left: 10px;
  }

  .campusManagement_title_right {
    display: flex;
    align-items: center;
  }


  .campusManagement_weekName {
    position: absolute;
    left: 0;
    top: 60px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
  }

  .weekName_title {
    width: 10%;
  }

  .weekName_li {
    width: 18%;
  }

  .commonBox_courseTableBox {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .commonBox_courseTable_left {
    width: 10%;
  }

  .commonBox_courseTable_right {
    width: 90%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }

  .commonBox_courseTable_left_li {
    height: 16.67%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .commonBox_courseTable_right_li {
    width: 19.7%;
    height: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #4db3f8;
    border-radius: 4px;
    font-size: 28px;
    color: #fff;
  }

  /* 更正 */

  .attendanceBox {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    z-index: 1000;
    padding: 25px 33px 25px 56px;
  }

  .common_showBox {
    padding: 0;
  }

  .attendanceStatistics {
    height: 100%;
  }

  .common_form {
    padding-bottom: 10px;
  }

  /* 更正 */

</style>
